<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>图片图层</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="//webapi.amap.com/maps?v=2.0&key=98c485ff1e3c2b4318481832bee4355a&plugin=AMap.Geocoder"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <style>
        html,
        body,
        #container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript" >
    var imageLayer = new AMap.ImageLayer({
        url: 'http://yyjcs.top/dtdmeo/1.jpg',
        bounds: new AMap.Bounds(
            [116.392159,39.913331],  //x
            [116.401858,39.923715]   //y
        ),
        zooms: [15, 20]
    });
    var map = new AMap.Map('container', {
        center: [116.39705,39.917301],
        zoom: 15,
        layers: [
            AMap.createDefaultLayer(),
            imageLayer,
        ]
    });

//点添加
//1
    var marker1=new AMap.Marker({
        position:new AMap.LngLat(116.394613,39.915393),
        title:'武英殿',
        map:map
    });
    marker1.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"1武英殿"
    })

//2
    var marker2=new AMap.Marker({
        position:new AMap.LngLat(116.395235,39.917882),
        title:'冰窖餐厅',
        map:map
    });
    marker2.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"2冰窖餐厅"
    })

    //3
    var marker3=new AMap.Marker({
        position:new AMap.LngLat(116.39396,39.917906),
        title:'宁慈花园',
        map:map
    });
    marker3.setLabel({
        offset:new AMap.Pixel(5,5),
        content:"3宁慈花园"
    })

    //4
    var marker4=new AMap.Marker({
            position:new AMap.LngLat(116.395738,39.91889),
            title:'隆宗门',
            map:map
        });
        marker4.setLabel({
            offset:new AMap.Pixel(5,5),
            content:"4隆宗门"
        })
       //5
       var marker5=new AMap.Marker({
            position:new AMap.LngLat(116.398233,39.91891),
            title:'景运门',
            map:map
        });
        marker5.setLabel({
            offset:new AMap.Pixel(5,5),
            content:"5景运门"
        })
        //6
       var marker6=new AMap.Marker({
            position:new AMap.LngLat(116.400362,39.919931),
            title:'皇极殿',
            map:map
        });
        marker6.setLabel({
            offset:new AMap.Pixel(5,5),
            content:"6皇极殿"
        })

          //7
       var marker7=new AMap.Marker({
            position:new AMap.LngLat(116.400346,39.920963),
            title:'养性殿',
            map:map
        });
        marker7.setLabel({
            offset:new AMap.Pixel(5,5),
            content:"7养性殿"
        })
           //8
       var marker8=new AMap.Marker({
            position:new AMap.LngLat(116.399729,39.921868),
            title:'倦勤斋',
            map:map
        });
        marker8.setLabel({
            offset:new AMap.Pixel(5,5),
            content:"8倦勤斋"
        })
         //9
       var marker9=new AMap.Marker({
            position:new AMap.LngLat(116.39683,39.921479),
            title:'御花园',
            map:map
        });
        marker9.setLabel({
            offset:new AMap.Pixel(5,5),
            content:"9御花园"
        })


// 矢量图 路线规划

var path=[//每个弧线段有两种描述方式
    [116.397206,39.913489],//起点
        //路线图
      [116.397231,39.914172],
      [116.396078,39.914159],
      [116.396046,39.913855],
      [116.395793,39.913843],
      [116.394613,39.915393],
      [116.395328,39.915463],
      [116.395235,39.917882],
      [116.395414,39.918541],
      [116.394115,39.918537],
      [116.393901,39.917949],
      [116.394115,39.918537],
      [116.395414,39.918541],
      [116.395741,39.918903],
      [116.398233,39.91891],
      [116.400416,39.918892],
      [116.400362,39.919931],
      [116.400003,39.920389],
      [116.400346,39.920963],
      [116.399761,39.921842],
      [116.39683,39.921479],
      [116.396865,39.922298],
];
var polyline = new AMap.Polyline({
      path: path,
      isOutline: true,
      outlineColor: '#ffeeff',
      borderWeight: 3,
      strokeColor: "#3366FF",
      strokeOpacity: 1,
      strokeWeight: 6,
      // 折线样式还支持 'dashed'
      strokeStyle: "solid",
      // strokeStyle是dashed时有效
      strokeDasharray: [10, 5],
      lineJoin: 'round',
      lineCap: 'round',
      zIndex: 50,
    })
    map.add([polyline]);
    map.setFitView();
</script>
</body>
</html>
